<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{height:height+'px'}">
			<!-- <view class="tui-header-top" :style="{paddingTop:top+'px'}"> -->
			<view class="tui-header-top" :style="{paddingTop:top + 10 +'px'}">
				<view class="image_top" v-if="imageurl">
					<image class="imagestop" :src="imageurl"></image>
				</view>
				{{tabletop}}
			</view>
			<view class="tui-header-top-icon" :style="{marginTop:top+'px'}">
				<tui-icon name="arrowleft" size="27" color="#000" @tap="back"></tui-icon>
			</view>
		</view>
		<!--header-->
		
		<!-- 社群主页 -->
			<view class="tui-header-banner">
				<view class="blocklevel">
					<view>{{total.pre_sell_count}}</view>
					<view>帮卖记录</view>
				</view>
				<view class="blocklevel">
					<view>¥ {{centsToYuan(total.pre_sell_amount)}}</view>
					<view>销售额</view>
				</view>
				<view class="blocklevel">
					<view>¥ {{centsToYuan(total.pre_sell_comm)}}</view>
					<view>佣金累计</view>
				</view>
			</view>
		<!-- 社群主页 -->
		
		<!-- 接龙案例 -->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="case">
				<view class="case_box">
					<view class="tuiTips" style="margin-top: 40%;" v-if="rareData.length == 0" >
						<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
					</view>
					<view class="istarted" v-for="(item, index) in rareData" :key="index" @click="openActionSheet_members(item.user_id,index,item.sell_status)">
						<view class="istarted_nr">
							<view v-if="item.status == 1" class="istarted_top">
								<view class="istarted_top_status"><span style="color:#1193E3;">·</span> 接龙进行中</view>
							</view>
							<view v-else class="istarted_top">
								<view class="istarted_top_status"><span style="color:#999;">·</span> 接龙已结束</view>
							</view>
							<view class="istarted_title">
								<view class="istarted_title_name">{{item.title}}</view>
							</view>
							<view class="istarted_bottom">
								<view class="istarted_bottom_left">
									<view>销售订单：{{item.pre_sell_count ? item.pre_sell_count : '0' }}</view>
									<view>积累佣金：{{centsToYuan(item.pre_sell_comm ? item.pre_sell_comm : '0' )}}</view>
									<view>已结算佣金：{{centsToYuan(item.sell_comm ? item.sell_comm : '0' )}}</view>
								</view>
								<view class="istarted_bottom_right">
									<view>销售金额：{{centsToYuan(item.pre_sell_amount ? item.pre_sell_amount : '0' )}}</view>
									<view></view>
									<view>待结算佣金：{{centsToYuan(item.pre_sell_comm - item.sell_comm)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 接龙案例 -->
		
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		
		<!-- 接龙案例 -->
		<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		<view class="tui-safearea-bottom"></view>
		<!-- 接龙案例 -->
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>
<script>
	const dataTime = require('../../utils/util.js');

	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiCard from "@/components/card/card"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiListView,
			tuiListCell,
			tuiCard,
			tuiToast,
			tuiTips
		},
		props: {
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				userInfo: '',
				current: 0,
				banner: [
					"1.png",
					"2.png",
				],
				userCount: 0,
				statusList: [],
				rareData: [],
				page: 1,
				loadding: false,
				pullUpOn: true,
				empty: 1,
				scrollTop: 0,
				orderInfo: {
					orderTotal:{2:0,3:0},	
					account:{balance:0},
				},
				uid: '',
				username: [],
				user_id: '',
				height: 0,
				top: 0,
				tabletop: '帮卖成员记录',
				imageurl: '',
				total: {},
			}
		},
		onLoad:function(option){
			console.log(option);
			this.uid = option.uid;
			console.log(this.uid);
			if(option.display_status == 0){
				this.display_status = option.display_status;
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.user_id = option.user_id;
			if(this.userInfo){
				this.loadData(this.uid);
			}else{
				this.empty = 0
				this.loadding = false
				this.pullUpOn = false
			}
			
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						// this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						// this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6) ;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					}
				})
			}, 50);
		},
		methods: {
			centsToYuan: function(amount){
				return this.tui.centsToYuan(amount);
			},
			back: function(){
				uni.navigateBack();
			},
			loadData: function(){
				console.log(this.uid);
				this.loadding = true
				
				this.tui.request('user/fansSell',{sell_user_id:this.uid}).then((res) => {
					this.tabletop = res.info.nickname
					this.imageurl = res.info.imageurl;
					this.total = res.list.total;
					console.log(this.total);
					console.log('user/fansSell',res)
					if(res.list.list.length > 0){
						this.loadding = false
						this.pullUpOn = true
						this.empty = 1
						this.page++
						this.userCount = res.userCount
						this.statusList = res.statusList
						for( let i = 0; i < res.list.list.length; i++ ){
							this.rareData.push(res.list.list[i])
						}
					}else{
						this.loadding = false
						this.pullUpOn = false
					}
					if(res.list.list.length == 0 &&  this.page == 1){
						this.empty = 0
					
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			}
		},
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom: function() {
			if(this.pullUpOn == true){
				this.loadData();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss">
	@import '../../static/style/thorui.css';
	.font-Tag{
		font-weight: 550 !important;
		margin-bottom: 50rpx !important;
	}
	.container {
		/* padding-bottom: 100rpx; */
		color: #333;
		padding-bottom: env(safe-area-inset-bottom);

	}
	.tui-center{
		text-align: center;
	}
	/* 接龙案例 */
	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 30upx 30upx;
		margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}
	.case_box_time{
		/* padding-left: 5rpx; */
	}
	.case_box_time_text{
		color: #b1b1b1;
		padding-left: 10rpx;
	}
	.case_box_right{
		color: #1193E3;
		font-weight: 500;
		
	}
	.case{
		/* background: #FFFFFF; */
		padding: 0 30rpx 0 30rpx;
	}
	.case_title{
		font-size: 35rpx;
		font-weight: 700;
		padding-top: 20rpx;
	}
	.case_describe{
		font-size: 28rpx;
		color: #a6a6a6;
		padding-top: 10rpx;
		line-height: 60rpx;
	}
	.case_box{
		padding: 0px 0px 40px 0px;
	}
	.tui-header-right{
		font-weight: 550;
	}
	.tui-header-title{
		font-size: 30rpx !important;
		font-weight: 500;
		margin-top: 0rpx !important;
		color: #000000 !important;
		max-width: 625rpx !important;
		// min-width: 460rpx !important;
	}
	.tui-header-title-time{
		margin-top: 0rpx !important;
		color: #999 !important;
	}
	.tui-header-left view{
		line-height: 50rpx;
		// letter-spacing: 4rpx;
	}
	.tui-title {
		width: 100%;
		padding: 70upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		line-height: 30upx;
		color: #666;
	}
	.case_box_title{
		padding-left: 20rpx !important;
		// margin: 25rpx auto !important;
		font-weight: 550;
		// padding-bottom: 18rpx;
		// letter-spacing: 4rpx;
		font-size: 35rpx !important;
	}
	.case_boxi_content {
		padding: 0upx 30upx;
		margin: 5rpx auto;
		color: #9e9e9e;
		font-size: 28rpx;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
/* 	.case_boxi_footer{
		padding: 30upx 20upx;
		color: #f40e2a;
		font-size: 35rpx;
		font-weight: 500;
	} */
	.tui-card{
		margin: 0rpx !important;
		margin-top: 20rpx !important;
		box-shadow: 0 0 3rpx #eee !important;
		border: 1rpx solid #f5f5f5 !important;
	}
	.tui-header-thumb{
		border-radius: 10% !important;
		width: 90rpx !important;
		height: 90rpx !important;
	}
	/* 接龙案例 */
	
	
	/* header */
	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		background: #0bc99d;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 999;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}
	.tui-header-banner {
		/* padding-top: 60rpx; */
		box-sizing: border-box;
		background: #FFF;
		padding-top: 185rpx;
		margin-bottom: 10rpx;
		// line-height: 160rpx !important;
		height: 400rpx !important;
	}
	.image_top{
		float: left;
		margin-right: 10rpx;
		height: 100rpx;
	}
	.image_top image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		margin-top: 20rpx;
	}
	.theleftname{
		font-weight: 500;
		font-size: 35rpx;
		text-align: left;
		height: 50rpx;
	}
	.theleftcount{
		color: #999;
		font-size: 28rpx;
	}
	.theleft{
		height: 100rpx;
		float: left;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.theleft view{
		line-height: 50rpx;
	}
	.tui-banner-bg {
		display: flex;
		height: 330rpx;
		background: #FFF;
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 200rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background: #0c83cc;
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}
	
	.tui-banner-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		/* bottom: -80rpx; */
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 270rpx;
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
		box-shadow: 0px 5px 5px rgba(0,0,0,0.3);
	}

	.tui-slide-image {
		width: 100%;
		height: 270rpx;
		display: block;
	}

	/* #ifdef APP-PLUS || MP */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}
	/* #endif */
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
		background: #FFFFFF;
	}
	
	.tui-modal-content {
		color: #000000 !important;
	}
	
	.tui-header-top {
		width: 100%;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 500;
		height: 30rpx;
		display: flex;
		font-weight: 550;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-top-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}
	
	.tui-modal-title {
		font-size: 32rpx !important;
	}
	
	.tui-red {
		background: none !important;
		color: #0A8FE2 !important;
		font-size: 33rpx !important;
	}
	
	.tui-red-outline::after {
		border: none !important;
	}
	
	.blocklevel{
		width: 33%;
		float: left;
		text-align: center;
		line-height: 60rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	/* header */
	
	/* 我发起的帮卖css */
	.istarted{
		width: 90%;
		background: #fff;
		padding: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	.istarted_top_status{
		line-height: 70rpx;
		font-size: 24rpx;
		line-height: 70rpx;
	}
	
	.istarted_top_status span{
		font-size: 40rpx;
		float: left;
		margin-right: 10rpx;
	}
	
	.istarted_title{
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.istarted_bottom{
		height: 164rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 58rpx;
	}
	
	.istarted_bottom_left{
		width: 50%;
		float: left;
	}
	
	.istarted_bottom_right{
		width: 50%;
		float: right;
	}
	
	.istarted_bottom_left view{
		height: 58rpx;
	}
	
	.istarted_bottom_right view{
		height: 58rpx;
	}
</style>